<template>
  <div class="hd-wrap">
    <div :class="'hd' + (wrapper ? ' wrapper' : '')">
      <div class="op-l">
        <el-button type="primary" plain class="btn" @click="handleGoBack">返回</el-button>
      </div>
      <div class="tit">
        <h2>
          <span>{{title}}</span>
        </h2>
      </div>
      <div class="op-r">
        <slot name="headRight" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';

@Options({
  props: {
    title: String,
    wrapper: Boolean,
    goBack: Function
  },
})
export default class AnswerHead extends Vue {
  goBack!: () => {};

  // 处理返回
  handleGoBack() {
    if (this.goBack) {
      this.goBack();
    }
  }
}
</script>

<style scoped lang="scss">
.hd-wrap {
  box-shadow: 0px 2px 3px rgb(170 170 170 / 35%);
  background: #fff;
}
.hd {
  position: relative;
  height: 75px;
  padding: 0;
}
.op-l,
.op-r {
  position: absolute;
  width: 350px;
  height: 100%;
  top: 0;
  &:after {
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
  }
}
.op-l {
  left: 0;
  text-align: left;
}
.op-r {
  right: 0;
  text-align: right;
}
.btn {
  display: inline-block;
  vertical-align: middle;
  width: 77px;
  height: 34px;
  padding: 0;
  min-height: auto;
  font-size: 14px;
  border: none;
}
.tit {
  height: 100%;
  padding: 0 293px;
  text-align: center;
  h2,
  &:before {
    display: inline-block;
    vertical-align: middle;
  }
  &:before {
    content: '';
    height: 100%;
  }
  h2 {
    width: 100%;
    font-size: 20px;
    color: $text-color;
    span {
      word-break: break-all;
      line-height: 30px;
      @include multiEllipse(2);
    }
  }
}
</style>
